<template>
  <div>
    <!-- regionFull.vue  283行 新闻 -->
  <div
    class="component component--layout layout--D4"
    v-for="(item, index) in newsData1"
    :key="index"
  >
    <header class="header header--secondary">
      <h2 class="title">
        <a class="link" :href="item.link">{{ item.content }}</a>
      </h2>
      <p class="paragraph">
        {{ item.content1 }}
      </p>
    </header>

    <div class="column column--primary">
      <div class="element element--article MarketWatchcom">
        <figure class="article__figure">
          <a
            class="figure__image disableShadowBox"
            data-video-guid=""
            :href="item.link1"
          >
            <img class="lazyautosizes lazyloaded" :src="item.image" />
          </a>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <a class="link" :href="item.link2">
              {{ item.content2 }}
            </a>
          </h3>
          <p class="article__summary">
            {{ item.content3 }}
          </p>
        </div>
      </div>
    </div>
    <div class="column column--aside">
      <div class="element element--article MarketWatchcom">
        <figure class="article__figure">
          <a class="figure__image disableShadowBox" :href="item.link3">
            <img
              class="lazyautosizes lazyloaded"
              alt="Read full story"
              :src="item.image1"
            />
          </a>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <a class="link" :href="item.link4">
              {{ item.content4 }}
            </a>
          </h3>
        </div>
      </div>

      <div
        data-timestamp="1715072580000"
        data-docid="1685557664"
        data-msgid="445"
        data-guid="20c06575-04d4-b545-7317-fb86a6d33e38"
        class="element element--article MarketWatchcom"
      >
        <figure class="article__figure">
          <a class="figure__image disableShadowBox" :href="item.link5">
            <img class="lazyautosizes lazyloaded" :src="item.image2" />
          </a>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <a class="link" :href="item.link5">
              {{ item.content5 }}
            </a>
          </h3>
        </div>
      </div>
      <!-- 如果有第三组数据，就显示，如果没有就不显示 -->
      <div
        class="element element--article MarketWatchcom"
        v-if="item.image3 != null"
      >
        <figure class="article__figure">
          <a class="figure__image disableShadowBox" :href="item.link7">
            <img class="lazyautosizes lazyloaded" :src="item.image3" />
          </a>
        </figure>
        <div class="article__content">
          <h3 class="article__headline">
            <a class="link" :href="item.link8">
              {{ item.content6 }}
            </a>
          </h3>
        </div>
      </div>
    </div>
  </div>
  </div>
  
</template>
<script  setup>
const props =defineProps (["newsData1"])
</script>
<style lang="scss" scoped>
.column--aside{
  display: flex;
  flex-wrap: nowrap;
}
</style>
